// 入口函数
$(function () {
  // 第一步：找到`id`为`title`的输入框 给它注册键盘按下事件，但是确定是回车键按下才行
  $("#title").on("keydown", function (e) {
    // 获取keycode
    var keycode = e.keyCode;
    // 判断按下是哪一个键  如果回车键添加到本地存储中
    if (keycode === 13) {
      // 获取对应的输入框的数据
      var data = $(this).val();
      // 判断用户是否输入了数据
      if (data.trim().length === 0) return alert("请输入合法的数据");
      var localData = getData(); // 会得到函数的返回值 要么是一个空数组 要么是数组里面有数组元素的数组
      // 定义一个对象
      var obj = {
        title: data,
        done: false
      };
      // 然后将数据添加到数组中
      localData.push(obj);
      // 同时需要将数据存储到本地存储中
      //   window.localStorage.setItem("todolist", JSON.stringify(localData));
      //   console.log(localData);
      // 把数据写入到本地存储中
      setData(localData);
      // 要渲染数据
      render();
      // 将输入框清空
      $(this).val("");
    }
  });

  // 先需要去本地存储中 看看 有没有 一个名字叫 todolist 的数据 如果有 就将它取出来 如果没有 返回空数组
  function getData() {
    // 从本地存储中取出来的数据
    var storageData = window.localStorage.getItem("todolist");
    // console.log(storageData);
    if (storageData === null) {
      // 表示本地存储中 没有 key为todolist的数据
      return [];
    } else {
      // 需要将数据取出来 本地存储里面存储的是一个字符串类型的数据  需要将其转换为对象
      return JSON.parse(storageData);
    }
  }

  // 封装一个函数 专用将数据存储到本地存储中
  function setData(data) {
    window.localStorage.setItem("todolist", JSON.stringify(data));
  }

  // 封装一个函数 用于渲染数据到浏览器上面
  function render() {
    // 从本地存储中将数据取出来
    var data = getData();
    // 可以使用jQuery中的$.each方法来遍历数组
    // jQuery对象.each(function(index,item){})
    var ol = ""; // 未完成
    var ul = ""; // 已经完成
    var success = 0;
    var nosuccess = 0;
    $.each(data, function (i, item) {
      // 如果是已完成的
      if (item.done) {
        success++;
        // 表示已经完成
        ul += `
            <li>
                <input type="checkbox" checked="checked" data-index="${i}">
                <p>${item.title}</p>
                <a href="javascript:;" data-index="${i}"></a>
            </li>
        `;
      } else {
        nosuccess++;
        // 表示未完成
        ol += `
          <li>
              <input type="checkbox" data-index="${i}">
              <p>${item.title}</p>
              <a href="javascript:;" data-index="${i}"></a>
          </li>
       `;
      }
    });
    // console.log(li);
    // 将这个数据写入到对象的数据中
    $("ol").html(ol);
    $("ul").html(ul);

    $("#todocount").html(nosuccess);
    $("#donecount").html(success);
  }

  render();

  // 删除功能
  $("ol,ul").on("click", "a", function () {
    if (window.confirm("你真的要删除吗?")) {
      // 先要获取到数据
      var data = getData(); // 数组
      // 获取到自定义的属性
      var index = $(this).attr("data-index"); // 下标

      // 删除数据里面的元素
      data.splice(index, 1);
      // 将已经删除的元素再次的写入到本地存储中
      setData(data);
      // 重新渲染页面
      render();
    }
  });

  // 将待办事项变成已办事项
  $("ol").on("click", "input", function () {
    // 获取数据所在这条数据的索引号
    var index = $(this).siblings("a").attr("data-index");
    // 同时需要从本地存储中将对象的数据取出来
    var data = getData();
    // 找到数组里面的元素 将它的done属性的值进行修改
    data[index].done = $(this).prop("checked");
    // 需要将本地存储里面的数据也要进行修改
    setData(data);
    // 调用render()函数
    render();
  });
});
